<%--
  Created by IntelliJ IDEA.
  User: qjqe@outlook.com
  Date: 2020/5/9
  Time: 0:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="include/header.jsp"%>
<head>
    <style type="text/css">
        /*
 * Base structure
 */

        /* Move down content because we have a fixed navbar that is 50px tall */
        body {
            padding-top: 50px;
        }


        /*
         * Global add-ons
         */

        .sub-header {
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        /*
         * Top navigation
         * Hide default border to remove 1px line.
         */
        .navbar-fixed-top {
            border: 0;
        }

        /*
         * Sidebar
         */

        /* Hide for mobile, show later */
        .sidebar {
            display: none;
        }
        @media (min-width: 768px) {
            .sidebar {
                position: fixed;
                top: 51px;
                bottom: 0;
                left: 0;
                z-index: 1000;
                display: block;
                padding: 20px;
                overflow-x: hidden;
                overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
                background-color: #f5f5f5;
                border-right: 1px solid #eee;
            }
        }

        /* Sidebar navigation */
        .nav-sidebar {
            margin-right: -21px; /* 20px padding + 1px border */
            margin-bottom: 20px;
            margin-left: -20px;
        }
        .nav-sidebar > li > a {
            padding-right: 20px;
            padding-left: 20px;
        }
        .nav-sidebar > .active > a,
        .nav-sidebar > .active > a:hover,
        .nav-sidebar > .active > a:focus {
            color: #fff;
            background-color: #428bca;
        }


        /*
         * Main content
         */

        .main {
            padding: 20px;
        }
        @media (min-width: 768px) {
            .main {
                padding-right: 40px;
                padding-left: 40px;
            }
        }
        .main .page-header {
            margin-top: 0;
        }


        /*
         * Placeholder dashboard ideas
         */

        .placeholders {
            margin-bottom: 30px;
            text-align: center;
        }
        .placeholders h4 {
            margin-bottom: 0;
        }
        .placeholder {
            margin-bottom: 20px;
        }
        .placeholder img {
            display: inline-block;
            border-radius: 50%;
        }

    </style>
    <script>
        var status="#course";
        //加载页面初始化
        window.onload = function () {
            //方法内容
            $("#course").addClass("active");
        };
        function activecss(thisname) {   //导航切换
            $(status).removeClass("active");
            $(thisname).addClass("active");
            status=thisname;
        }
        function getInfo(thisname) {   //获取信息

            if (thisname=="#course")
            {
                url="/course/manage"
            }else if (thisname=="#chengji")
            {
                url="/markman/query"
            }
            else if (thisname=="#xinxi")
            {
                url="/chagepasswordpage"
            }
            $.ajax({
                url: url,
                type: "get",
                data: null,
                contentType: "text/html;charset=UTF-8",
                success: function (data) {
                    $(".main").html(data);
                },
                error: function () {

                }
            });

        }
        if(window.name != "off"){   //只执行一次


            //获取对应的页面元素
            $.ajax({
                url: "/course/manage",
                type: "get",
                data: null,
                contentType: "text/html;charset=UTF-8",
                success: function (data) {
                    $(".main").html(data);
                },
                error: function () {
                }
            });

        }
        $(function () {
            $("#course").click(function () {
                activecss("#course");
                getInfo("#course");
            });
            $("#chengji").click(function () {
                activecss("#chengji");
                getInfo("#chengji");

            });
            $("#xinxi").click(function () {
                activecss("#xinxi");
                getInfo("#xinxi");
            });
        });


    </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="nav-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            </button>
            <a class="navbar-brand" href="#">心理拓展中心管理系统(教师)</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class=" nav navbar-nav navbar-right">
                <li>
                    <a href="/teacher/account/logout">注销</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li  id="course"><a href="#">课程管理<span class="sr-only">(current)</span></a></li>
                <li  id="chengji"><a href="#">成绩管理<span class="sr-only">(current)</span></a></li>
                <li id="xinxi"><a  >个人信息</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        </div>
    </div>
</div>

</body>